<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		
		<div id="blog-posts-events-demo">
		  <div :style="{ fontSize: postFontSize + 'em' }">
		    <blog-post
		      v-for="post in posts"
		      v-bind:key="post.id"
		      v-bind:post="post"
			  v-on:enlarge-text="postFontSize += 0.1"
		    ></blog-post>
		  </div>
		</div>
		
		<script type="text/javascript">
			Vue.component('blog-post', {
			  props: ['post'],
			  template: `
			    <div>
			      <h3>{{ post.title }}</h3>
			      <button v-on:click='$emit("enlarge-text")'>
			        Enlarge text
			      </button>
			      <div v-html="post.content"></div>
			    </div>
			  `
			})
			
			new Vue({
			  el: '#blog-posts-events-demo',
			  data: {
			    posts: [
			      { id: 1, title: 'My journey with Vue' },
			      { id: 2, title: 'Blogging with Vue' },
			      { id: 3, title: 'Why Vue is so fun' }
			    ],
			    postFontSize: 1
			  }
			})
		</script>
		
	</body>
</html>
